import React, { Component } from 'react'
import { Input, Checkbox, Button } from 'antd'

export default class ToDolist extends Component {
    state = {
        val: "",
        list: []
    }
    // 删除
    delItem = (index) => {
        let list = [...this.state.list]
        list.splice(index, 1)
        this.setState({
            list
        })
    }
    render() {
        const { val, list } = this.state
        return (
            <div>
                <div className="header">
                    {/* onKeyUp  处理按下回车事件 */}
                    <Input value = { val } onKeyUp = {(ev) => {
                        // 按下了回车
                        if (ev.keyCode === 13) {
                            let obj = {
                                val: this.state.val,
                                // 控制复选框
                                checked: false
                            }
                            this.state.list.push(obj)
                            this.setState({
                                list: this.state.list,
                                val: ""
                            })
                        }
                    }} onChange = {(ev) => {
                        this.setState({
                            val: ev.target.value
                        })
                    }} style = {{
                        width: 300,
                        marginTop: 8,
                        marginLeft: 300
                    }} placeholder="请输入要添加的内容" />
                </div>

                <div className="main">
                    {/* 筛选数组取总数量 */}
                    <h2>正在进行 --- { list.filter(item => !item.checked).length } </h2>
                    <ul>
                        {
                            list.map((item, index) => {
                                return <li className = { item.checked? 'none': 'block' } key = { index }>
                                    <Checkbox checked = { item.checked } onChange = {(ev) => {
                                        let list = [...this.state.list]
                                        list[index].checked = ev.target.checked
                                        this.setState({
                                            list
                                        })
                                    }}/> -- <Input style = {{ width: 240 }} onChange = {(ev) => {
                                        let list = [...this.state.list]
                                        list[index].val = ev.target.value
                                        this.setState({
                                            list
                                        })
                                    }} value = { item.val }/>
                                    <Button onClick = {() => {
                                        this.delItem(index)
                                    }} danger type="primary">删除</Button>
                                </li>
                            })
                        }
                    </ul>
                    <h2>已经完成 --- { list.filter(item => item.checked).length } </h2>
                    <ul>
                        {
                            list.map((item, index) => {
                                return <li className = { item.checked? 'block': 'none' } key = { index }>
                                    <Checkbox checked = { item.checked } onChange = {(ev) => {
                                        let list = [...this.state.list]
                                        list[index].checked = ev.target.checked
                                        this.setState({
                                            list
                                        })
                                    }}/> -- <Input style = {{ width: 240 }} onChange = {(ev) => {
                                        let list = [...this.state.list]
                                        list[index].val = ev.target.value
                                        this.setState({
                                            list
                                        })
                                    }} value = { item.val }/>
                                     <Button onClick = {() => {
                                        this.delItem(index)
                                    }} danger type="primary">删除</Button>
                                </li>
                            })
                        }
                    </ul>
                </div>
            </div>
        )
    }
}
